<template>
  <div>
    <h2>主题色</h2>
    <div class="flex">
      <div
        v-for="item in list"
        :key="item.type"
        :class="`bar-${item.type}`"
        class="flex-1 rounded my-2 mr-2 p-2 text-white"
      >
        <i class="el-icon-check"></i>
        {{ item.text }}
      </div>
    </div>

    <h2>测试面包屑</h2>
    <div class="my-2">
      <el-button type="primary" plain @click="$router.push('/home/add')">跳新建页</el-button>
      <el-button type="primary" plain @click="$router.push('/home/edit')">跳编辑页</el-button>
    </div>
    <h2>请求示例</h2>
    <div class="my-2">
      <el-button type="primary" plain @click="get">普通get</el-button>
      <el-button type="primary" plain @click="getWithToken">携带token的get</el-button>
      <el-button type="primary" plain @click="getWithoutLoading">不需要loading的get</el-button>
    </div>
    <div class="my-2">
      <el-button type="primary" plain title="sdfsdf" @click="post">普通post</el-button>
      <el-button type="primary" plain @click="postWithCancel">
        禁止重复提交的post（疯狂点击试试）
      </el-button>
      <el-button type="primary" plain @click="postWithoutCancel">
        允许重复提交的post（疯狂点击试试）
      </el-button>
    </div>
    <h2>日期函数</h2>
    <div class="my-2">使用 dayjs</div>
    <h2>枚举</h2>
    <div class="my-1">苹果：{{ Fruit['Apple'] }}</div>
    <div class="my-1">香蕉：{{ Fruit['Banana'] }}</div>
    <div class="my-1">梨：{{ Fruit['Pear'] }}</div>
    <h2>常量</h2>
    <div class="my-2">写在 /src/constants/index.js 里</div>
    <h2>环境变量</h2>
    <div class="my-2">
      配置在 /src/config/index.js 里
      <i>{{ config }}</i>
    </div>
  </div>
</template>
<script>
import { getUserList, addUser } from '../../api/httpService'
import { Fruit } from '../../enums'
const config = require('@/config/index')
export default {
  name: 'Home',
  data() {
    return {
      // 环境变量参数
      config,
      checked: true,
      list: [
        { type: 'primary', icon: 'menu', text: '主要' },
        { type: 'success', icon: 'check', text: '成功' },
        { type: 'warning', icon: 'warning', text: '警告' },
        { type: 'danger', icon: 'delete', text: '危险' },
        { type: 'info', icon: 'info', text: '信息' },
      ],
      Fruit,
    }
  },
  methods: {
    // 普通get请求
    get() {
      getUserList({ name: 'cxx' }).then(res => {
        const { list } = res
        console.log(list)
        this.$message.success('成功')
      })
    },
    // 携带token的get请求
    getWithToken() {
      getUserList({ name: 'cxx' }, { headers: { token: 'abcdefg' } }).then(() => {})
    },
    // 不需要loading的get请求
    getWithoutLoading() {
      getUserList({ name: 'cxx' }, {}, { loading: false }).then(() => {
        this.$message.success('成功')
      })
    },
    // 普通post请求
    post() {
      addUser({ name: 'cxx' }).then(() => {})
    },
    // post请求禁止重复提交
    postWithCancel() {
      addUser({ name: 'cxx' }, {}, { loading: false }).then(() => {
        this.$message.success('成功')
      })
    },
    // post请求允许重复提交
    postWithoutCancel() {
      addUser({ name: 'cxx' }, {}, { loading: false, repeatCancel: false }).then(() => {
        this.$message.success('成功')
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.bar-primary {
  background: $primary;
}

.bar-warning {
  background: $warning;
}

.bar-success {
  background: $success;
}

.bar-danger {
  background: $danger;
}

.bar-info {
  background: $info;
}
</style>
